﻿<phone:PhoneApplicationPage 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
	x:Class="NASA.BeAMartian.Views.MarsGallery"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="False"
    xmlns:locCtl="clr-namespace:NASA.BeAMartian.Controls"
    locCtl:TiltEffect.IsTiltEnabled="True">
	<phone:PhoneApplicationPage.Resources>
		<Style TargetType="Image" x:Key="stImage">
			<Setter Property="Height" Value="180"></Setter>
		</Style>
		<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
				<toolkit:WrapPanel/>
		</ItemsPanelTemplate>
		<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="0,0,8,8"/>
			<Setter Property="BorderBrush" Value="Transparent"/>
			<Setter Property="Padding" Value="0"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBoxItem">
						<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="SelectionStates">
									<VisualState x:Name="Unselected"/>
									<VisualState x:Name="Selected">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="ListBoxItemStyleVideo" TargetType="ListBoxItem">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="0,0,0,20"/>
			<Setter Property="BorderBrush" Value="Transparent"/>
			<Setter Property="Padding" Value="0"/>
			<Setter Property="HorizontalContentAlignment" Value="Left"/>
			<Setter Property="VerticalContentAlignment" Value="Top"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ListBoxItem">
						<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="SelectionStates">
									<VisualState x:Name="Unselected"/>
									<VisualState x:Name="Selected">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Storyboard x:Name="sbFadeInTopTen">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lbTopTen">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="sbFadeInMarsAsArt">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lbMarsAsArt">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</phone:PhoneApplicationPage.Resources>

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>

	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot">
		<!--Pivot Control-->
		<Image Source="/NASA.BeAMartian;component/Assets/Images/blk.png" Stretch="Fill"/>
		<!--Pivot Control-->
		<controls:Pivot x:Name="pvt" Title="SELECT AN IMAGE" SelectionChanged="pvt_SelectionChanged">
            <controls:PivotItem Header="top ten" Tag="TopTen">
                <Grid>
                    <ProgressBar x:Name="pbTopTen" IsIndeterminate="True" Height="17" Margin="-16,169,-15,0" VerticalAlignment="Top" Foreground="{StaticResource BeAMAccentBrush}">
                    	<ProgressBar.Background>
                    		<SolidColorBrush Color="{StaticResource BeAMAccentColor}"/>
                    	</ProgressBar.Background>
                    </ProgressBar>

                    <ListBox x:Name="lbTopTen" SelectionChanged="ListBox_SelectionChanged" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" Opacity="0">
						<ListBox.ItemTemplate>
							<DataTemplate>
								<Image Tag="TopTen" ImageOpened="Image_ImageOpened" Style="{StaticResource stImage}" Source="{Binding Thumbnail}"/>
							</DataTemplate>
						</ListBox.ItemTemplate>
					</ListBox>
				</Grid>
			</controls:PivotItem>

 			<!--Pivot item two-->
            <controls:PivotItem Header="mars as art" Tag="MarsAsArt">
                <Grid>
                    <ProgressBar x:Name="pbMarsAsArt" IsIndeterminate="True" Height="17" Margin="-16,169,-15,0" VerticalAlignment="Top" Background="#FF4BFF3C" Foreground="{StaticResource BeAMAccentBrush}"/>

                    <ListBox x:Name="lbMarsAsArt" SelectionChanged="ListBox_SelectionChanged" ItemsPanel="{StaticResource ItemsPanelTemplate1}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" Opacity="0">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Image Tag="MarsAsArt" ImageOpened="Image_ImageOpened" Style="{StaticResource stImage}" Source="{Binding Thumbnail}"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </controls:PivotItem>
		</controls:Pivot>
	</Grid>
</phone:PhoneApplicationPage>